import React from 'react';
import {StyleSheet, Image, ScrollView, Text, WebView, View, ActivityIndicator, FlatList, RefreshControl} from 'react-native';
import {List, Flex, WingBlank, WhiteSpace, Toast, wrap, Badge} from '@ant-design/react-native';
import {getShareNewsList} from '~/api/share';
import moment from 'moment';
import {connect} from 'react-redux';
import {getMsgList} from '~/api/message';
const Item = List.Item;
const Brief = Item.Brief;
let pagecount = 0;
let index = 1;
let size = 10;

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};
class TimeInfo extends React.Component {
    static navigationOptions = {
        title: '新闻资讯',
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        // 设置当前组件的属性
        this.state = {
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            kind_id: 6,
            url: global.AppData.base_url,
            list: [],
        };
        console.disableYellowBox = true;
        this.getNewsList();
    }
    getNewsList() {
        getShareNewsList({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
            kind_id: 6,
            identity: this.props.userinfo.identity,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            } else {
                Toast.info(r.msg, 1);
            }
        });
    }
    _onRefresh() {
        this.setState({footer: 0, page_index: index, page_size: size}, () => {
            this.getNewsList();
        });
    }
    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    getShareNewsList({
                        page_index: this.state.page_index,
                        page_size: this.state.page_size,
                        kind_id: 6,
                        identity: this.props.userinfo.identity,
                    }).then((r) => {
                        dataArray = r.data.list;
                        dataArray = this.state.list.concat(dataArray);
                        if (r.code === 0) {
                            this.setState({
                                list: dataArray,
                                isLoading: false,
                            });
                        } else {
                            Toast.info(r.msg, 1);
                        }
                    });
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <>
                <View style={{backgroundColor: '#F6F6F6', width: '100%', height: 5}} />
                <Item
                    style={{backgroundColor: '#FFFFFF'}}
                    onPress={() => {
                        this.props.navigation.push('Details', {id: item.id, link: item.link});
                    }}>
                    {item.thumbs.length === 1 ? (
                        <Flex>
                            <Flex style={{width: '70%', height: 100}} direction="column" align="start" justify="between">
                                <Text style={{fontSize: 16}}>{item.title}</Text>
                                <Flex direction={'row'} style={{marginTop: '10%'}}>
                                    <Text style={{color: '#999999'}}>{item.source}</Text>
                                    <Flex align="center">
                                        <Image style={{width: 15, height: 15}} source={require('~/assets/my/time2x.png')} />
                                        <Text style={{marginLeft: 5, color: '#999999'}}>{moment(item.datetime).format('YYYY.MM.DD HH:mm')}11</Text>
                                    </Flex>
                                </Flex>
                            </Flex>
                            <Flex align="center">
                                <Image style={styles.imageone} source={{uri: this.state.url + item.thumbs[0]}} />
                            </Flex>
                        </Flex>
                    ) : (
                        <Flex direction="column" align="start">
                            <Flex style={{width: '100%'}} direction="column" align="start">
                                <Text style={{fontSize: 20}}>{item.title}</Text>
                            </Flex>
                            <Flex align="center" style={{width: '100%'}} justify={'between'}>
                                {item.thumbs.length === 2 ? (
                                    <View style={{width: '100%', flexDirection: 'row', justifyContent: 'space-between'}}>
                                        <Image style={styles.image} source={{uri: this.state.url + item.thumbs[0]}} />
                                        <Image style={styles.image} source={{uri: this.state.url + item.thumbs[1]}} />
                                    </View>
                                ) : (
                                    <View style={{width: '100%', flexDirection: 'row', justifyContent: 'space-between'}}>
                                        <Image style={styles.images} source={{uri: this.state.url + item.thumbs[0]}} />
                                        <Image style={styles.images} source={{uri: this.state.url + item.thumbs[1]}} />
                                        <Image style={styles.images} source={{uri: this.state.url + item.thumbs[2]}} />
                                    </View>
                                )}
                            </Flex>
                            <Flex direction={'row'} style={{marginBottom: 10}}>
                                <Text style={{color: '#999999'}}>{item.source}</Text>
                                <Flex align="center">
                                    <Image style={{width: 15, height: 15}} source={require('~/assets/my/time2x.png')} />
                                    <Text style={{marginLeft: 5, color: '#999999'}}>{moment(item.datetime).format('YYYY.MM.DD HH:mm')}11</Text>
                                </Flex>
                            </Flex>
                        </Flex>
                    )}
                </Item>
            </>
        );
    }
    render() {
        return (
            <View style={{backgroundColor: '#F6F6F6'}}>
                <List>
                    <FlatList
                        data={this.state.list}
                        showsVerticalScrollIndicator={false}
                        renderItem={(data) => this._renderItem(data.item)}
                        keyExtractor={(item, index) => index}
                        ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                        onEndReached={() => {
                            this.loadData();
                        }}
                        onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                        refreshing={true}
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.refreshing}
                                onRefresh={() => {
                                    this._onRefresh();
                                }}
                            />
                        }
                    />
                </List>
            </View>
        );
    }
}
export default connect(mapGetter)(TimeInfo);
const styles = StyleSheet.create({
    images: {
        width: '30%',
        height: 100,
        marginTop: 10,
        marginBottom: 10,
    },
    image: {
        width: '48%',
        height: 100,
        marginTop: 10,
        marginBottom: 10,
    },
    imageone: {
        width: '55%',
        height: 100,
        marginTop: 10,
        marginBottom: 10,
    },
});
